<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 500px;
            height: 100px;
            border-color: aqua;
        }
        .xx{
            background-color: dimgray;
        }
        .g{
            background-color: gold;
        }
        .b{
            background-color: chartreuse;
        }
        #red{
            background-color: red;
        }
    </style>
    <script>
        var cn ;
        function f() {
            var arr = document.getElementsByTagName("tr");
            for (var i = 1; i < arr.length; i++) {
                if (i%2==0){
                    arr[i].className = "b";
                }
            }
        }
        function f1(val) {
            var a = document.getElementById(val);
            cn = a.id;
            a.id = "red";
        }
        function f2(val) {
            var a = document.getElementById(val);
            a.id = cn;
        }
    </script>
</head>
<body onload="f()">
    <table border="1" cellpadding="1" cellspacing="1">
        <th class="xx">姓名</th>
        <th class="xx">年龄</th>
        <th class="xx">地址</th>
        <tr class="g" id="a1" onmouseover="f1(this.id)" onmouseout="f2(this.id)">
            <td  class="a1">张三</td>
            <td  class="a1">27</td>
            <td  class="a1">上海</td>
        </tr>
        <tr class="g" id="b1" onmouseover="f1(this.id)" onmouseout="f2(this.id)">
            <td class="b2">小强</td>
            <td class="b2">26</td>
            <td class="b2">北京</td>
        </tr>
        <tr class="g" id="c1" onmouseover="f1(this.id)" onmouseout="f2(this.id)">
            <td class="c3">李四</td>
            <td class="c3">29</td>
            <td class="c3">广州</td>
        </tr>
        <tr class="g" id="d1"onmouseover="f1(this.id)" onmouseout="f2(this.id)">
            <td class="d4">孙八</td>
            <td class="d4">23</td>
            <td class="d4">南京</td>
        </tr>
        <tr class="g" id="e1"onmouseover="f1(this.id)" onmouseout="f2(this.id)">
            <td class="e5">二麻子</td>
            <td class="e5">19</td>
            <td class="e5">大连</td>
        </tr>
        <tr class="g" id="f1"onmouseover="f1(this.id)" onmouseout="f2(this.id)">
            <td class="f6">犀利姐</td>
            <td class="f6">32</td>
            <td class="f6">青岛</td>
        </tr>
    </table>
</body>
</html>